<template>
  <DatePicker
    :valueFormat="valueFormat"
    :value="value"
    :allowClear="false"
    @change="onChange"
  ></DatePicker>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { DatePicker } from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs';

const props = defineProps({
  formState: {
    type: Object,
    requried: true,
  },
  defaultValue: {
    type: [String, Array],
    default: '',
  },
  valueFormat: {
    type: String,
    default: 'YYYY-MM-DD',
  },
});

const emit = defineEmits(['change']);

const onChange = (val: any) => {
  value.value = val;
  emit('change', val);
};

watch(
  () => props.formState,
  (val: any) => {
    value.value = val.dayList;
  },
  { deep: true },
);

const value = ref<Dayjs>();
value.value = props.defaultValue;
</script>
